<template>
  <div>
    <chartContent title="厦门市地图">
      <div id="mapContainer" style="width: 47.83vw; height: 72vh"></div>
    </chartContent>
  </div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import chartContent from "./chartContent.vue";
import { hosiptalPostion } from "@/request/hospital";
import { requireImg } from "@/utils";

// let imgsrc = requireImg('hospital/info_5.png')
// let markContent = `<img src="${imgsrc}" style="width: 20px; height: 20px">`

const createInfoWindow = (AMap, map, position, name) => {
  const infoWindow = new AMap.InfoWindow({
    content: name,
  });
  infoWindow.open(map, position);
};
const createPoint = (AMap, map, info) => {
  let markPosition = new AMap.LngLat(info.position[0], info.position[1]);
  const marker = new AMap.Marker({
    position: markPosition, //位置
    // content: markContent,
    offset: [0, 0],
  });
  marker.on("click", (e) => {
    createInfoWindow(AMap, map, e.target.getPosition(), info.hospitalName);
  });
  map.add(marker); //添加到地图
};
onMounted(async () => {
  //获取医院位置
  const {
    data: { data: hosiptalPostionRes },
  } = await hosiptalPostion();
  AMapLoader.load({
    key: "e95d8904e4d2c6a37b97e883b6c1e41f", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      const map = new AMap.Map("mapContainer", {
        pitch: 70, //地图俯仰角度，有效范围 0 度- 83 度
        viewMode: "3D", //地图模式
        rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
        pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
        zoom: 13, //初始化地图层级
        rotation: -15, //初始地图顺时针旋转的角度
        zooms: [2, 20], //地图显示的缩放级别范围
        center: hosiptalPostionRes[0].position, //初始地图中心经纬度
      });
      // 标记点
      hosiptalPostionRes.map((item) => {
        createPoint(AMap, map, item);
      });
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
});
</script>

<style lang="less" scoped></style>
